<template>
  <div>
    <el-tabs
      type="border-card"
      style="margin: 0 20px; height: 93vh"
      @tab-click="tabChange"
      v-model="$store.state.activeName5"
    >
      <el-tab-pane label="数据预警" name="数据预警">
        <el-scrollbar style="height: 80vh">
          <el-table :data="tableData" stripe>
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警原因"
              prop="warnDesc"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警发生时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警最新发送邮件时间"
              prop="lastMailTime"
              align="center"
            ></el-table-column>
            <el-table-column label="预警状态" prop="warnStatus" align="center">
              <template slot-scope="scope">
                <el-button v-if="scope.row.warnStatus === '正常'" type="success"
                  >正常</el-button
                >
                <el-button
                  v-if="scope.row.warnStatus === '数据预警'"
                  type="danger"
                  >数据预警</el-button
                >
                <el-button
                  v-if="scope.row.warnStatus === '预警处理中'"
                  type="warning"
                  >预警处理中</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="warnStatus" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="
                    scope.row.warnStatus === '数据预警' ||
                    scope.row.warnStatus === '预警处理中'
                  "
                  type="danger"
                  @click="point(scope.row.id)"
                  >点击处理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="设备预警" name="设备预警">
        <el-scrollbar style="height: 80vh">
          <el-table :data="tableData2" stripe>
            <el-table-column
              label="站点名称"
              prop="sensorName"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警原因"
              prop="warnDesc"
              align="center"
              width="500"
            ></el-table-column>
            <el-table-column
              label="预警发生时间"
              prop="warnTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警最新发送邮件时间"
              prop="lastMailTime"
              align="center"
            ></el-table-column>
            <el-table-column
              label="预警状态"
              prop="equipmentWarnStatus"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '00'"
                  type="success"
                  >正常</el-button
                >
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '01'"
                  type="danger"
                  >数据预警</el-button
                >
                <el-button
                  v-if="scope.row.equipmentWarnStatus === '02'"
                  type="warning"
                  >预警处理中</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              prop="equipmentWarnStatus"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="
                    scope.row.equipmentWarnStatus === '01' ||
                    scope.row.equipmentWarnStatus === '02'
                  "
                  type="danger"
                  @click="point2(scope.row.id)"
                  >点击处理</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="预警处理" :visible.sync="dialog_flag">
      <el-form
        :model="form"
        size="medium"
        :label-position="labelPosition"
        :label-width="labelWidth"
      >
        <el-form-item label="处理方式">
          <el-select
            v-model="form.mode"
            placeholder="请选择预警处理方式"
            style="display: flex"
          >
            <el-option label="数据恢复正常" value="00"></el-option>
            <el-option label="1小时内不预警" value="01"></el-option>
            <el-option label="6小时内不预警" value="02"></el-option>
            <el-option label="1天内不预警" value="03"></el-option>
            <el-option label="3天内不预警" value="04"></el-option>
            <el-option label="7天内不预警" value="05"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="备注说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_flag = false">取 消</el-button>
        <el-button type="primary" @click="handle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="预警处理" :visible.sync="dialog_flag2">
      <el-form
        :model="form2"
        size="medium"
        :label-position="labelPosition"
        :label-width="labelWidth"
      >
        <el-form-item label="处理方式">
          <el-select
            v-model="form2.mode"
            placeholder="请选择预警处理方式"
            style="display: flex"
          >
            <el-option label="数据恢复正常" value="00"></el-option>
            <el-option label="1小时内不预警" value="01"></el-option>
            <el-option label="6小时内不预警" value="02"></el-option>
            <el-option label="1天内不预警" value="03"></el-option>
            <el-option label="3天内不预警" value="04"></el-option>
            <el-option label="7天内不预警" value="05"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form2.remark"
            placeholder="备注说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_flag2 = false">取 消</el-button>
        <el-button type="primary" @click="handle2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "WarningManagementChart",
  props: {
    node: Object,
  },
  data() {
    return {
      tableData: null,
      tableData2: null,
      rowKey: null,
      dialog_flag: false,
      form: {
        mode: "",
        remark: "",
      },
      dialog_flag2: false,
      form2: {
        mode: "",
        remark: "",
      },
      labelPosition: "left",
      labelWidth: "90px",
    };
  },
  methods: {
    tabChange(tab) {
      this.$store.dispatch("getTabName5", tab.paneName);
    },
    dataWarn(list) {
      for (let i = 0; i < list.length; i++) {
        if (
          list[i].warnTime != undefined &&
          list[i].warnTime != null &&
          list[i].warnTime != ""
        )
          list[i].warnTime = moment(list[i].warnTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        if (
          list[i].lastMailTime != undefined &&
          list[i].lastMailTime != null &&
          list[i].lastMailTime != ""
        )
          list[i].lastMailTime = moment(list[i].lastMailTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        if (
          list[i].dataWarnStatus == "00" &&
          list[i].middleWarnStatus == "00" &&
          list[i].relativeWarnStatus == "00"
        ) {
          list[i].warnStatus = "正常";
        } else if (
          list[i].dataWarnStatus == "01" ||
          list[i].middleWarnStatus == "01" ||
          list[i].relativeWarnStatus == "01"
        ) {
          list[i].warnStatus = "数据预警";
        } else if (
          list[i].dataWarnStatus == "02" ||
          list[i].middleWarnStatus == "02" ||
          list[i].relativeWarnStatus == "02"
        ) {
          list[i].warnStatus = "预警处理中";
        }
      }
      this.tableData = list;
    },
    sensorWarn(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].equipmentWarnStatus != "00") {
          if (
            list[i].warnTime != undefined &&
            list[i].warnTime != null &&
            list[i].warnTime != ""
          )
            list[i].warnTime = moment(list[i].warnTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          if (
            list[i].lastMailTime != undefined &&
            list[i].lastMailTime != null &&
            list[i].lastMailTime != ""
          )
            list[i].lastMailTime = moment(list[i].lastMailTime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
        }
      }
      this.tableData2 = list;
    },
    point(id) {
      this.dialog_flag = true;
      this.rowKey = id;
    },
    handle() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"dealType\\":\\"${this.form.mode}\\",\\"dealPerson\\":\\"xnchy\\",\\"id\\":\\"${this.rowKey}\\",\\"comment\\":\\"${this.form.remark}\\"}","serviceCode":"updateDataWarningByPage","timestamp":"","uuid":""}`,
      }).then(() => {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listDataWarning","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.dataWarn(res.data.parameter.list);
        });
      });
      this.dialog_flag = false;
    },
    point2(id) {
      this.dialog_flag2 = true;
      this.rowKey = id;
    },
    handle2() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"dealType\\":\\"${this.form2.mode}\\",\\"dealPerson\\":\\"xnchy\\",\\"id\\":\\"${this.rowKey}\\",\\"comment\\":\\"${this.form2.remark}\\"}","serviceCode":"updateEquipmentWarningByPage","timestamp":"","uuid":""}`,
      }).then(() => {
        Axios({
          url: serviceApi.KB_API,
          method: "post",
          data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listEquipmentWarning","timestamp":"","uuid":""}`,
        }).then((res) => {
          this.sensorWarn(res.data.parameter.list);
        });
      });
      this.dialog_flag2 = false;
    },
  },
  created() {
    let fun = () => {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listDataWarning","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.dataWarn(res.data.parameter.list);
      });
    };
    let fun2 = () => {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"${this.node.moduleEnum}\\",\\"monitorId\\":\\"${this.node.monitorId}\\"}","serviceCode":"listEquipmentWarning","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.sensorWarn(res.data.parameter.list);
      });
    };
    let warningManagement = async () => {
      await fun();
      await fun2();
    };
    warningManagement();
  },
};
</script>

<style lang="less" scoped>
.el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-tabs .el-button {
  width: 150px;
}
.el-dialog__wrapper {
  /deep/ .el-dialog {
    margin: 35vh auto auto auto !important;
    width: 500px;
  }
}
</style>